{% extends '__base__.html' %}

{% block title %}代理{% endblock %}
{% block content %}
<div class="container">
    <div class="row">
        <div class="btn-toolbar col" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group mr-2" role="group" aria-label="First group">
                <button type="button" class="btn btn-primary reflash">刷新获取代理</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col pb-4 table-responsive">
            <table class="table table-hover table-striped">
                <thead>
                    <tr>
                        <th scope="col" width="14%">IP</th>
                        <th scope="col" width=" 8%">端口</th>
                        <th scope="col" width=" 6%">类型</th>
                        <th scope="col" width=" 8%">匿名度</th>
                        <th scope="col">位置</th>
                        <th scope="col" width=" 6%">Ping</th>
                        <th scope="col" width="16%">最后验证时间</th>
                        <th scope="col" width="16%">创建时间</th>
                        <th scope="col" width="16%">修改时间</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in items %}
                    <tr style="cursor: pointer;">
                        <td>{{ item.ip }}</td>
                        <td>{{ item.port }}</td>
                        <td>{{ item.http_type }}</td>
                        <td>{{ item.anony }}</td>
                        <td class="tb-filename" data-toggle="tooltip" data-placement="top" title="{{ item.location }}">
                            {{ item.location }}</td>
                        <td>{{ item.ping }}秒</td>
                        <td>{{ item.validate_time }}</td>
                        <td>{{ item.created_at }}</td>
                        <td>{{ item.updated_at }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
</div>
{% endblock %}

{% block beforebody %}
<script>
    document.querySelector('.btn-toolbar .reflash').addEventListener('click', function (event) {
        axios.get('/proxy/reflash' + name)
            .then(function (response) {
                // console.log(response);
                if (response.status === 200) {
                    let data = response.data
                    if (data['code'] === 0) {
                        console.log('SUCCESS: ' + data['msg'])
                        location.assign('/proxy')
                    } else {
                        console.log('FAILED: ' + data['msg'])
                        alert(data['msg'])
                    }
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    })
</script>
{% endblock %}